<template>
    <div id="PieDoughnut" :style="{height:height}" :title="title" :seriesData="seriesData">
    </div>
</template>
<script>
    import {on, off} from './tools'

    // const seriesData = [
    //     {value: 1048, name: '搜索引擎'},
    //     {value: 735, name: '直接访问'},
    //     {value: 580, name: '邮件营销'},
    //     {value: 484, name: '联盟广告'},
    //     {value: 300, name: '视频广告'}
    // ];

    export default {
        name: 'Bar',
        props: {
            seriesData: Array,
            height: {
                type: String,
                default: "254px"
            },
            title: String
        },
        data() {
            return {
                msg: '',
                chart: null,
                width: "100%",
                option: {
                    color: ["#84bafd",
                        "#6ad9e6",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'right',
                    },
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1048, name: '搜索引擎'},
                                {value: 735, name: '直接访问'},
                                {value: 580, name: '邮件营销'},
                                {value: 484, name: '联盟广告'},
                                {value: 300, name: '视频广告'}
                            ]
                        }
                    ]
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.drawLine();
            })
        },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('PieDoughnut'))
                this.chart = myChart;
                // 绘制图表
                this.option.series[0].data = this.seriesData;
                this.option.title.text = this.title;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }

</script>
<style>
    #Bar div {
        width: 100%;
    }
</style>
